<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>木鱼项目大全</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.0/vue.min.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.min.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script> -->
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.min.css" rel="stylesheet" />
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    #app {
        padding: 10px;
    }

    .el-card {
        margin-bottom: 10px;
    }

    .list {
        display: flex;
        font-size: 13px;
        margin-bottom: 8px;
    }

    .list-lable {
        width: 20%;
        text-align: right;
        margin-right: 5px;
    }

    .list-txt {
        width: 80%;
        display: flex;
        align-items: top;
    }

    .el-card__body {
        padding: 10px;
    }
</style>

<body>
    <div id="app" class="muyu">
        <el-card class="box-card" v-for="item in tableData">
            <div class="list">
                <div class="list-lable">项目名:</div>
                <div class="list-txt">{{item.project}}<el-tag type="success" size="small"
                        style="margin-left: 5px;">{{item.price}}</el-tag>
                </div>

            </div>
            <div class="list">
                <div class="list-lable">描述:</div>
                <div class="list-txt">{{item.tip}}</div>
            </div>
            <div class="list">
                <div class="list-lable">下载地址:</div>
                <div class="list-txt">{{item.address}}</div>
            </div>
        </el-card>
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data() {
            return {
                tableData: [{
                    project: '推客帮',
                    price: '12 R',
                    tip: "完成新手任务 (完不成可以联系我，报名我的任务刷过去)",
                    type: "1",
                    address: 'xxxx'
                }, {
                    project: '有乐帮',
                    price: '12 R',
                    tip: "完成新手任务 (完不成可以联系我，报名我的任务刷过去)",
                    type: "1",
                    address: 'xxxx'
                }, {
                    project: '多米赚',
                    price: '10 R',
                    tip: "完成新手任务 (完不成可以联系我，报名我的任务刷过去)",
                    type: "1",
                    address: 'xxxx'
                }, {
                    project: '元宝帮',
                    price: '15 R',
                    tip: "完成新手任务 (完不成可以联系我，报名我的任务刷过去)",
                    type: "1",
                    address: 'xxxx'
                },]
            }
        }
    });
</script>

</html>